<template>
    <view>
        <map id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" show-location></map>
    </view>
</template>

<script>
// pages/storeMap/index.js
export default {
    data() {
        return {
            latitude: 39.90469,
            // 中心纬度（北京）
            longitude: 116.40717,
            // 中心经度（北京）
            markers: [
                {
                    id: 1,
                    latitude: 39.90469,
                    longitude: 116.40717,
                    name: '北京市',
                    iconPath: '/images/marker.png',
                    // 自定义图标
                    width: 30,
                    height: 30,
                    callout: {
                        content: '北京市',
                        color: '#FFFFFF',
                        fontSize: 14,
                        borderRadius: 5,
                        bgColor: '#000000',
                        padding: 10,
                        display: 'ALWAYS'
                    }
                },
                {
                    id: 2,
                    latitude: 31.23037,
                    longitude: 121.4737,
                    name: '上海市',
                    iconPath: '/images/marker.png',
                    width: 30,
                    height: 30
                }
            ],
            polyline: [
                {
                    points: [
                        {
                            latitude: 39.90469,
                            longitude: 116.40717
                        },
                        {
                            latitude: 39.91469,
                            longitude: 116.41717
                        }
                    ],
                    color: '#FF0000',
                    // 路线颜色
                    width: 2,
                    // 路线宽度
                    dottedLine: false // 是否为虚线
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
map {
    width: 100%;
    height: 100vh;
}
</style>
